<div class="content-section introduction">
    <div class="feature-intro">
        <h1>MenuModel API</h1>
        <p>PrimeNG menus components share a common api to specify the menuitems and submenus.</p>
    </div>
</div>

<div class="content-section documentation implementation">
    <h5>MenuItem</h5>
    <p>Core of the api is MenuItem class that defines various options such as the label, icon and children of an item in a menu. Example below
    is a sample configuration with Menu component.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-menu [model]="items"&gt;&lt;/p-menu&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;MenuModule&#125; from 'primeng/menu';
import &#123;MenuItem&#125; from 'primeng/api';
import &#123;MegaMenuItem&#125; from 'primeng/api';  //required when using MegaMenu
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MenuDemo &#123;

    private items: MenuItem[];

    ngOnInit() &#123;
        this.items = [&#123;
            label: 'File',
            items: [
                &#123;label: 'New', icon: 'pi pi-plus'&#125;,
                &#123;label: 'Open', icon: 'pi pi-download'&#125;
            ]
        &#125;,
        &#123;
            label: 'Edit',
            items: [
                &#123;label: 'Undo', icon: 'pi pi-refresh'&#125;,
                &#123;label: 'Redo', icon: 'pi pi-repeat'&#125;
            ]
        &#125;];
    &#125;
&#125;
</app-code>

    <h5>MegaMenu</h5>
    <p>All menu components except MegaMenu uses MenuItem[] as the model, in the case of MegaMenu root level items should be MegaMenuItem[] whereas
        nested submenus can be MenuItem[]. See the <a [routerLink]="['/menumodel']">MegaMenu</a> documentation for samples.</p>

    <p>MenuItem provides the following properties. Note that not all of them may be utilized by the menu component.</p>
    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>id</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Identifier of the element.</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Text of the item.</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Icon of the item.</td>
                </tr>
                <tr>
                    <td>iconStyle</td>
                    <td>object</td>
                    <td>null</td>
                    <td>Inline style of the item's icon.</td>
                </tr>
                <tr>
                    <td>command</td>
                    <td>function</td>
                    <td>null</td>
                    <td>Callback to execute when item is clicked.</td>
                </tr>
                <tr>
                    <td>url</td>
                    <td>string</td>
                    <td>null</td>
                    <td>External link to navigate when item is clicked.</td>
                </tr>
                <tr>
                    <td>routerLink</td>
                    <td>array</td>
                    <td>null</td>
                    <td>RouterLink definition for internal navigation.</td>
                </tr>
                <tr>
                    <td>routerLinkActiveOptions</td>
                    <td>object</td>
                    <td>null</td>
                    <td>Configuration for active router link.</td>
                </tr>
                <tr>
                    <td>queryParams</td>
                    <td>object</td>
                    <td>null</td>
                    <td>Query parameters for internal navigation via routerLink.</td>
                </tr>
                <tr>
                    <td>fragment</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Sets the hash fragment for the URL.</td>
                </tr>
                <tr>
                    <td>queryParamsHandling</td>
                    <td>QueryParamsHandling</td>
                    <td>null</td>
                    <td>How to handle query parameters in the router link for the next navigation. One of:<br /><br />

                        merge : Merge new with current parameters.<br />
                        preserve : Preserve current parameters.k.</td>
                </tr>
                <tr>
                    <td>preserveFragment</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>When true, preserves the URL fragment for the next navigation.</td>
                </tr>
                <tr>
                    <td>skipLocationChange</td>
                    <td>boolean</td>
                    <td>null</td>
                    <td>When true, navigates without pushing a new state into history.</td>
                </tr>
                <tr>
                    <td>replaceUrl</td>
                    <td>boolean</td>
                    <td>null</td>
                    <td>When true, navigates while replacing the current state in history.</td>
                </tr>
                <tr>
                    <td>state</td>
                    <td>object</td>
                    <td>null</td>
                    <td>Developer-defined state that can be passed to any navigation.</td>
                </tr>
                <tr>
                    <td>items</td>
                    <td>array</td>
                    <td>null</td>
                    <td>An array of children menuitems.</td>
                </tr>
                <tr>
                    <td>expanded</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>Visibility of submenu.</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>When set as true, disables the menuitem.</td>
                </tr>
                <tr>
                    <td>visible</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>Whether the dom element of menuitem is created or not.</td>
                </tr>
                <tr>
                    <td>target</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Specifies where to open the linked document.</td>
                </tr>
                <tr>
                    <td>escape</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>Whether to escape the label or not. Set to false to display html content.</td>
                </tr>
                <tr>
                    <td>separator</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>Defines the item as a separator.</td>
                </tr>
                <tr>
                    <td>style</td>
                    <td>object</td>
                    <td>null</td>
                    <td>Inline style of the menuitem.</td>
                </tr>
                <tr>
                    <td>styleClass</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Style class of the menuitem.</td>
                </tr>
                <tr>
                    <td>badge</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Value of the badge.</td>
                </tr>
                <tr>
                    <td>badgeStyleClass</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Style class of the badge.</td>
                </tr>
                <tr>
                    <td>title</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Tooltip text of the item.</td>
                </tr>
                <tr>
                    <td>automationId</td>
                    <td>any</td>
                    <td>null</td>
                    <td>Value of HTML data-* attribute.</td>
                </tr>
                <tr>
                    <td>tabindex</td>
                    <td>string</td>
                    <td>0</td>
                    <td>Specifies tab order of the item.</td>
                </tr>
                <tr>
                    <td>tooltipOptions</td>
                    <td>TooltipOptions</td>
                    <td> - </td>
                    <td>Options of the item's tooltip.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h4>Command</h4>
    <p>The function to invoke when an item is clicked is defined using the <i>command</i> property.</p>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MenuDemo &#123;

    private items: MenuItem[];

    ngOnInit() &#123;
        this.items = [&#123;
            label: 'File',
            items: [
                &#123;label: 'New', icon: 'pi pi-plus', command: (event) => &#123;
                    //event.originalEvent: Browser event
                    //event.item: menuitem metadata
                }}
            ]
        &#125;
    &#125;
&#125;
</app-code>

    <h4>Navigation</h4>
    <p>Navigation is specified using url property for external links and with <i>routerLink</i> for internal ones. If a menuitem has an active route, <i>p-menuitem-link-active</i> style class is added as an indicator. Active route link can be
    configured with <i>routerLinkActiveOptions</i> property of MenuItem API.</p>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MenuDemo &#123;

    private items: MenuItem[];

    ngOnInit() &#123;
        this.items = [&#123;
            label: 'File',
            items: [
                &#123;label: 'New', icon: 'pi pi-plus', url: 'http://www.primefaces.org/primeng'&#125;,
                &#123;label: 'Open', icon: 'pi pi-download', routerLink: ['/pagename']&#125;
                &#123;label: 'Recent Files', icon: 'pi pi-download', routerLink: ['/pagename'], queryParams: &#123;'recent': 'true'&#125;&#125;
            ]
        &#125;
    &#125;
&#125;
</app-code>

    <h4>Custom Content</h4>
    <p>Label of a menuitem both supports simple strings and html values as well. By default, html values are escaped, use <i>escape</i> property to allow html.</p>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MenuDemo &#123;

    private items: MenuItem[];

    ngOnInit() &#123;
        this.items = [&#123;
            label: '&lt;h2&gt;File&lt;/h2&gt;',
            escape: false,
            //...
        &#125;
    &#125;
&#125;
</app-code>

</div>
